/*! _charts.scss | Vuero | Css Ninja 2020-2021 */

/*
    1. Apex Charts
*/

/* ==========================================================================
1. Apex Charts
========================================================================== */

.apexcharts-title-text {
  font-family: var(--font-alt) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--dark-text);
}

.apexcharts-legend {
  .apexcharts-legend-text {
    font-family: var(--font) !important;
  }
}

.apexcharts-xaxis,
.apexcharts-yaxis {
  .apexcharts-xaxis-texts-g,
  .apexcharts-yaxis-texts-g {
    .apexcharts-text {
      font-family: var(--font) !important;
    }
  }
}

.apexcharts-datalabels-group {
  .apexcharts-text {
    font-family: var(--font) !important;
    font-weight: 600;
  }
}

.is-dark {
  .apexcharts-ycrosshairs {
    stroke: var(--dark-sidebar-light-12) !important;
  }

  .apexcharts-title-text {
    fill: var(--dark-dark-text) !important;
  }

  .apexcharts-subtitle-text {
    fill: var(--primary);
  }

  .apexcharts-yaxis {
    .apexcharts-yaxis-texts-g {
      .apexcharts-text,
      .apexcharts-yaxis-label {
        fill: var(--dark-dark-text);
      }
    }
  }

  .apexcharts-svg {
    .apexcharts-inner,
    .apexcharts-graphical {
      .apexcharts-xaxis {
        .apexcharts-xaxis-texts-g {
          .apexcharts-text,
          .apexcharts-xaxis-label {
            fill: var(--dark-dark-text);
          }
        }

        line {
          color: var(--dark-sidebar-light-12) !important;
          stroke: var(--dark-sidebar-light-12) !important;
        }
      }

      .apexcharts-grid {
        .apexcharts-gridlines-horizontal {
          .apexcharts-gridline {
            color: var(--dark-sidebar-light-12);
            stroke: var(--dark-sidebar-light-12);
          }
        }
      }
    }
  }

  .apexcharts-gridlines-vertical {
    .apexcharts-gridline {
      color: var(--dark-sidebar-light-12);
      stroke: var(--dark-sidebar-light-12);
    }
  }

  .apexcharts-series-markers,
  .apexcharts-series-bubble {
    .apexcharts-marker {
      color: var(--dark-sidebar-light-2);
      stroke: var(--dark-sidebar-light-2);
    }
  }

  .apexcharts-pie-area,
  .apexcharts-pie-slice-0 {
    color: var(--dark-sidebar-light-12);
    stroke: var(--dark-sidebar-light-12);
  }

  .apexcharts-radialbar-area {
    //color: var(--dark-sidebar-light-2);
  }

  .apexcharts-datalabels-group {
    .apexcharts-text,
    .apexcharts-datalabel-value {
      fill: var(--dark-dark-text);
    }
  }

  .apexcharts-legend {
    .apexcharts-legend-series {
      .apexcharts-legend-text {
        color: var(--dark-dark-text) !important;
      }
    }
  }

  .apexcharts-yaxis,
  .apexcharts-xaxis-inversed {
    line {
      color: var(--dark-sidebar-light-12);
      stroke: var(--dark-sidebar-light-12);
    }
  }

  .apexcharts-radialbar-track,
  .apexcharts-track {
    .apexcharts-radialbar-area {
      color: var(--dark-sidebar-light-2);
      stroke: var(--dark-sidebar-light-2);
    }
  }

  .apexcharts-radar-series,
  .apexcharts-plot-series {
    > polygon,
    > line {
      fill: none !important;
      color: var(--dark-sidebar-light-12);
      stroke: var(--dark-sidebar-light-12);
    }
  }

  .apexcharts-text,
  .apexcharts-yaxis-title-text {
    fill: var(--dark-dark-text);
    font-family: var(--font);
    font-weight: 400;
  }

  .apexcharts-data-labels text {
    fill: #fafafa;
    font-family: var(--font);
    font-weight: 400;
  }

  .apexcharts-bar-area {
    color: var(--dark-sidebar-light-12);
  }

  .apexcharts-slices {
    .apexcharts-pie-label {
      fill: #fafafa !important;
    }
  }

  .apexcharts-tooltip {
    box-shadow: 2px 2px 6px -4px var(--dark-sidebar) !important;

    &.apexcharts-theme-light {
      border: 1px solid var(--dark-sidebar-light-12);
      background: var(--dark-sidebar-light-2);
      color: var(--dark-dark-text) !important;

      .apexcharts-tooltip-title {
        background: var(--dark-sidebar-light-2);
        border-bottom: 1px solid var(--dark-sidebar-light-12);
        color: var(--dark-dark-text);
      }

      .apexcharts-tooltip-text-value,
      .apexcharts-tooltip-text-z-value,
      .apexcharts-tooltip-series-group,
      .apexcharts-tooltip-marker {
        color: var(--dark-dark-text) !important;
      }
    }

    * {
      font-family: var(--font);
      color: inherit;
    }

    .apexcharts-yaxistooltip-text {
      color: var(--dark-dark-text) !important;
    }
  }

  .apexcharts-xaxistooltip {
    border: 1px solid var(--dark-sidebar-light-12);
    background: var(--dark-sidebar-light-2);
    color: var(--dark-dark-text) !important;

    &.apexcharts-xaxistooltip-bottom::after {
      border-bottom-color: var(--dark-sidebar-light-2);
    }

    &.apexcharts-xaxistooltip-bottom::before {
      border-bottom-color: var(--dark-sidebar-light-12);
    }

    &.apexcharts-xaxistooltip-top::after {
      border-top-color: var(--dark-sidebar-light-2);
    }

    &.apexcharts-xaxistooltip-top::before {
      border-top-color: var(--dark-sidebar-light-12);
    }

    * {
      font-family: var(--font);
      color: inherit;
    }
  }
}

/* ==========================================================================
2. Billboard js
========================================================================== */

.bb-title {
  font-family: var(--font-alt) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--dark-text);
}

.bb-axis line,
.bb-axis .domain {
  color: var(--fade-grey-dark-4);
  stroke: var(--fade-grey-dark-4);
}

.tick {
  text tspan {
    fill: var(--light-text-dark-5);
  }
}

.is-dark {
  .bb-title {
    fill: var(--dark-dark-text) !important;
  }

  .bb-axis line,
  .bb-axis .domain {
    color: var(--dark-sidebar-light-20) !important;
    stroke: var(--dark-sidebar-light-20) !important;
  }

  .bb-legend {
    .bb-legend-background rect {
      fill: var(--dark-sidebar-dark-2) !important;
      color: var(--dark-sidebar-light-12) !important;
      stroke: var(--dark-sidebar-light-12) !important;
    }

    .bb-legend-item {
      text {
        fill: var(--dark-dark-text);
      }
    }
  }

  .bb-chart-arc path {
    color: var(--dark-sidebar-light-12) !important;
    stroke: var(--dark-sidebar-light-12) !important;
  }

  .bb-chart-arc .bb-gauge-value {
    fill: var(--light-text) !important;
  }

  .bb-chart-arcs .bb-chart-arcs-background {
    color: var(--dark-sidebar-light-10) !important;
    fill: var(--dark-sidebar-dark-2) !important;
    stroke: var(--dark-sidebar-dark-2) !important;
  }

  .bb-chart-arcs-title,
  .bb-gauge-value,
  .bb-axis text {
    fill: var(--dark-dark-text);
  }

  .bb-tooltip {
    border: 1px solid var(--dark-sidebar-light-10) !important;

    //background-color: var(--white);

    th {
      border-color: var(--dark-sidebar-light-10) !important;
      background-color: var(--dark-sidebar-dark-2) !important;
      color: #fffdfd !important;
      font-family: var(--font) !important;
      font-weight: 400 !important;

      span {
        font-family: var(--font) !important;
        font-weight: 400 !important;
        color: #fffdfd !important;
      }
    }

    tr {
      border-color: var(--dark-sidebar-light-10) !important;
    }

    td {
      background-color: var(--dark-sidebar-dark-2) !important;
      border-color: var(--dark-sidebar-light-10) !important;
      color: var(--light-text) !important;

      > span,
      > svg {
        border-color: var(--dark-sidebar-light-10) !important;
        fill: var(--white) !important;
        color: var(--white) !important;
      }
    }

    .bb-tooltip-title {
      color: #fffdfd !important;
    }

    .bb-tooltip-detail {
      .bb-tooltip-name,
      .bb-tooltip-value {
        color: #fffdfd !important;

        span {
          color: #fffdfd !important;
        }
      }
    }
  }
}
